<!--
@fucntion: 效益分析
-->
<template>
  <el-card style="background-color: #F2F6FC;">
    <el-card style="background-color: #C0C4CC;"> 
      <el-row :gutter="24">
          <el-col :span="6">
                  <el-select v-model=" Adata.LBMC" placeholder="设备类别" filterable clearable> 
                    <el-option
                      v-for="(item,index) in XLdata.data_LBMC"
                      :key="index"
                      :label="item.data"
                      :value="item.value">
                      <span style="float: left">{{ item.data }}</span>
                      <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
                    </el-option>
                  </el-select>
          </el-col>
          <el-col :span="6">
                  <el-select v-model="Adata.BMMC" placeholder="科室名称" filterable clearable> 
                    <el-option
                      v-for="(item,index) in XLdata.data_BMMC"
                      :key="index"
                      :label="item.data"
                      :value="item.value">
                      <span style="float: left">{{ item.data }}</span>
                      <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
                    </el-option>
                  </el-select>
          </el-col>
          <el-col :span="6">
            <el-date-picker
              v-model="Adata.value"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions">
            </el-date-picker>
          </el-col>
          <el-col :span="6">
            <el-button type="primary" plain @click="changeRefresh()">查询</el-button>
          </el-col>
      </el-row>
    </el-card>
    <el-card>
          <el-table
            size="mini"
            :data="AnalysisData"
            height="300"
            border
            style="width: 100%">
            <el-table-column
              prop="SBLB"
              label="设备类别">
            </el-table-column>
            <el-table-column
              prop="DWBH"
              label="科室名称">
            </el-table-column>
            <el-table-column
              prop="SBSL"
              label="设备数量 ">
            </el-table-column>
            <el-table-column
              prop="SFXMMC"
              label="收费项目-名称">
            </el-table-column>
            <el-table-column
              prop="SFXMDJ"
              label="收费项目-单价">
            </el-table-column>
            <el-table-column
              prop="SFXMSL"
              label="收费项目-数量">
            </el-table-column>
            <el-table-column
              prop="SFXMZJE"
              label="收费项目-总金额">
            </el-table-column>
          </el-table>
    </el-card>
    <el-card>
      <el-card style="background-color: #EBEEF5;"> 
        <span style="font-size:14px; float: left">设备统计</span>
      </el-card>
      <el-card>
        <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
        <div id="main" style="width: 100%;height:600px"></div>
      </el-card>
    </el-card>
  </el-card>
</template>

<script>
//导入echarts
import echarts from "echarts";

export default {
  name: "Detailed",
  data() {
    return {
      pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          },{
            text: '最近半年',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 180);
              picker.$emit('pick', [start, end]);
            }
          },{
            text: '最近一年',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
              picker.$emit('pick', [start, end]);
            }
          },{
            text: '最近三年',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 365*3);
              picker.$emit('pick', [start, end]);
            }
          }]
      },
      AnalysisData:[],
      Adata:{
        LBMC:'',
        BMMC:'',
        value:'',
      },
      sourceData:[  
              ],
      XLdata:{
      data_LBMC:{},//设备类别下拉
      data_BMMC:{},//所属科室下拉
      },
    };
  },
  methods: {
    changeRefresh(){
      var me = this;
      this.Refresh();
      me.$message.success("查询成功！");
    },
    //刷新页面
    Refresh() {
      var me = this;
      let url = "/static/data/Benefit.json";// /jcJsxxb
      if(url !== "") {
        me.getRequest(url,this.Adata).then(resp => {
            if(resp.status == 200) {
              this.AnalysisData = resp.data.results;
              this.sourceData = resp.data.sourceData;
              this.onto();
            }
        });
      }
    },
    onto: function() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));

      var option = {
          legend: {},
          tooltip: {
              trigger: 'axis',
              showContent: false
          },
          dataset: {
              source: this.sourceData
          },
          xAxis: {type: 'category'},
          yAxis: {gridIndex: 0},
          grid: {top: '55%'},
          series: [
              {type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
              {type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
              {type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
              {
                  type: 'pie',
                  id: 'pie',
                  radius: '30%',
                  center: ['50%', '25%'],
                  emphasis: {focus: 'data'},
                  label: {
                      formatter: '{b}: {@2012} ({d}%)'
                  },
                  encode: {
                      itemName: 'product',
                      value: '2012',
                      tooltip: '2012'
                  }
              }
          ]
      };

      myChart.on('updateAxisPointer', function (event) {
          var xAxisInfo = event.axesInfo[0];
          if (xAxisInfo) {
              var dimension = xAxisInfo.value + 1;
              myChart.setOption({
                  series: {
                      id: 'pie',
                      label: {
                          formatter: '{b}: {@[' + dimension + ']} ({d}%)'
                      },
                      encode: {
                          value: dimension,
                          tooltip: dimension
                      }
                  }
              });
          }
      });

      myChart.setOption(option);
    }
  },
  created: function() {
    var me = this;
    //设备类别下拉初始化
    me.getRequest("/static/data/data_BMMC.json",{}).then(resp=>{
      if(resp.status == 200) {
        me.XLdata.data_LBMC = resp.data.data;
      }
    });
    //所属部门下拉初始化
    me.getRequest("/static/data/data_BMMC.json",{}).then(resp=>{
      if(resp.status == 200) {
        me.XLdata.data_BMMC = resp.data.data;
      }
    });

    this.Refresh();
  },
};
</script>

<style lang="scss">
</style>